<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Shadow DOM</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <main>
      The checker should flag errors on all three of the following checkboxes
      <div id="notShadow"><input type="checkbox" /> Not labelled</div>
      <div id="shadowOpen"></div>
      <div id="shadowClosed"></div>
    </main>
    <script type="text/javascript">
      let openShadow = document
        .getElementById("shadowOpen")
        .attachShadow({ mode: "open" });
      let openInput = document.createElement("input");
      openInput.setAttribute("type", "checkbox");
      openShadow.appendChild(openInput);
      let openText = document.createTextNode("Not labelled open shadow");
      openShadow.appendChild(openText);

      let closedShadow = document
        .getElementById("shadowClosed")
        .attachShadow({ mode: "closed" });
      let closedInput = document.createElement("input");
      closedInput.setAttribute("type", "checkbox");
      closedShadow.appendChild(closedInput);
      let closedText = document.createTextNode("Not labelled closed shadow");
      closedShadow.appendChild(closedText);
    </script>

    <script>
      UnitTest = {
        ruleIds: ["WCAG20_Input_ExplicitLabel"],
        results: [
          {
            "ruleId": "WCAG20_Input_ExplicitLabel",
            "value": [
              "INFORMATION",
              "FAIL"
            ],
            "path": {
              "dom": "/html[1]/body[1]/main[1]/div[1]/input[1]",
              "aria": "/document[1]/main[1]/checkbox[1]"
            },
            "reasonId": "Fail_1",
            "message": "Form control element <input> has no associated label",
            "messageArgs": [
              "input"
            ],
            "apiArgs": [],
            "category": "Accessibility"
          },
          {
            "ruleId": "WCAG20_Input_ExplicitLabel",
            "value": [
              "INFORMATION",
              "FAIL"
            ],
            "path": {
              "dom": "/html[1]/body[1]/main[1]/div[2]/#document-fragment[1]/input[1]",
              "aria": "/document[1]/main[1]/checkbox[2]"
            },
            "reasonId": "Fail_1",
            "message": "Form control element <input> has no associated label",
            "messageArgs": [
              "input"
            ],
            "apiArgs": [],
            "category": "Accessibility"
          }
        ]
      };
    </script>
  </body>
</html>
